// 选择柜格Component
import React from 'react';
import PropTypes from 'prop-types';

import {
  View,
  Text,
  ScrollView,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Dimensions,
  Button,
} from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons';
import Row from '../components/Row';
import ColorButton from '../components/ColorButton';
import ModalViewUtil from '../components/ModalViewUtil';
import {useResponsive} from 'react-native-responsive-hook';
import {TouchableHighlight} from 'react-native-gesture-handler';
import Colors from '../resources/Colors';
export default class SelectProductView extends React.PureComponent {
  static propTypes = {
    products: PropTypes.array,
    onProductSelect: PropTypes.func,
    onClose: PropTypes.func,
  };
  constructor(props) {
    super(props);
    this.state = {selectedIndex: -1, items: props.products};
  }

  render() {
    return (
      <View
        style={{
          width: Dimensions.get('window').width * 0.8,
          minHeight: '30%',
          padding: 15,
          borderRadius: 8,
          alignItems: 'stretch',
          backgroundColor: 'white',
        }}>
        <Text
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            padding: 15,
            zIndex: 999,
            color: Colors.primaryColor,
          }}
          onPress={this.props.onManagerPress}>
          管理员取件
        </Text>
        <Text style={{textAlign: 'center', fontSize: 20}}>
          您有当下物品可取
        </Text>
        <Text style={{textAlign: 'center', fontSize: 15, marginTop: 10}}>
          请记得取完后关闭此弹框!!
        </Text>
        <ScrollView style={{width: '100%'}}>
          <Row style={{flexWrap: 'wrap', marginTop: 20}}>
            {this.state.items.map((item, index) => (
              <TouchableOpacity
                onPress={() => {
                  if (this.state.selectedIndex === index) {
                    this.setState({selectedIndex: -1});
                  } else {
                    this.setState({selectedIndex: index});
                  }
                }}
                style={{
                  width: '45%',
                  marginRight: '5%',
                  borderRadius: 8,
                  backgroundColor:
                    this.state.selectedIndex === index
                      ? '#30CF9C'
                      : '#C5ECDFFF',
                  marginBottom: 10,
                }}>
                <View
                  key={index}
                  style={{
                    paddingHorizontal: 20,
                    paddingVertical: 8,
                    alignItems: 'center',
                  }}>
                  <Text style={{color: 'white', fontSize: 20}}>
                    {item.assetsName}
                  </Text>
                </View>
              </TouchableOpacity>
            ))}
          </Row>
        </ScrollView>
        <ColorButton
          title={'选择柜格开启'}
          containerStyle={{marginTop: 20, paddingHorizontal: 30}}
          disabled={this.state.selectedIndex === -1}
          backgroundColor={'#30CF9C'}
          disabledContainerStyle={{backgroundColor: '#C5ECDFFF'}}
          fontSize={20}
          onPress={() => {
            const item = this.state.items[this.state.selectedIndex];
            this.props.onProductSelect(item, i => {
              // 将i从this.state.items中删除
              const copy = this.state.items.slice();
              copy.splice(this.state.selectedIndex, 1);
              if (copy.length > 0) {
                this.setState({items: copy, selectedIndex: -1});
              } else {
                ModalViewUtil.dismissView();
              }
            });
          }}
        />
        <TouchableWithoutFeedback onPress={this.props.onClose}>
          <Ionicons
            name={'close-outline'}
            size={50}
            style={{
              position: 'absolute',
              left: '45%',
              bottom: -100,
              backgroundColor: '#ffffff66',
              borderRadius: 25,
            }}
            color={'white'}
          />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}
